<template>
  <view class="chart-circle">
    <canvas 
      canvas-id="circleChart" 
      class="circle-chart"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    ></canvas>
    <view class="progress-box">
      <text class="progress-number" :style="{ color: progressColor }">{{ progress }}</text>
      <text class="progress-txt">本次综合分</text>
      <text class="progress-tag" :class="progressTagClass">{{ progressTag }}</text>
    </view>
  </view>
</template>

<script >
export default {
  props: {
    // 标题
    progress: {
      type: Number,
      default: 70
    },
  },
  data() {
    return {
      canvasWidth: 0, // canvas宽度
      canvasHeight: 0, // canvas高度
      animatedProgress: 0, // 动画进度值
      animationTimer: null, // 动画定时器
      circleChart: {
        radius: 0, // 圆环半径，将在initCanvasSize中计算
        angle: 220, // 圆环角度（度）
        rotationAngle: -200, // 圆环旋转角度（度）
        outerSegments: [
          { color: '#2AB55E', progress: 100 },  // 黄色段，50度
          { color: '#FFFFFF', progress: 95.5 }, // 间隔
          { color: '#2AB55E', progress: 95 }, // 绿色段，45度
          { color: '#FFFFFF', progress: 85.5 }, // 间隔
          { color: '#315BF4', progress: 85 }, // 蓝色段，42度
          { color: '#FFFFFF', progress: 69.5 }, // 间隔
          { color: '#F28F15', progress: 69 }, // 青色段，38度
          { color: '#FFFFFF', progress: 59.5 }, // 间隔
          { color: '#F02525', progress: 59 }, // 红色段，35度
        ]
      }
    }
  },
  computed: {
	// 当前进度颜色
    progressColor() {
      if (this.progress <= 59) {
        return '#F02525'
      } else if (this.progress >= 59 && this.progress <= 69) {
        return '#F28F15'
      } else if (this.progress >= 69 && this.progress <= 85) {
        return '#315BF4'
      } else if (this.progress >= 85 && this.progress <= 95) {
        return '#2AB55E'
      } else if (this.progress >= 95 && this.progress <= 100) {
        return '#2AB55E'
      }
    },
    // 获取当前分数标签
    progressTag() {
      if (this.progress <= 59) {
        return '需改进'
      } else if (this.progress >= 59 && this.progress <= 69) {
        return '一般'
      } else if (this.progress >= 69 && this.progress <= 85) {
        return '良好'
      } else if (this.progress >= 85 && this.progress <= 95) {
        return '优秀'
      } else if (this.progress >= 95 && this.progress <= 100) {
        return '卓越'
      }
    },
    progressTagClass() {
      if (this.progress <= 59) {
        return 'progress-tag-red'
      } else if (this.progress >= 59 && this.progress <= 69) {
        return 'progress-tag-yellow'
      } else if (this.progress >= 69 && this.progress <= 85) {
        return 'progress-tag-blue'
      } else if (this.progress >= 85 && this.progress <= 95) {
        return ''
      } else if (this.progress >= 95 && this.progress <= 100) {
        return ''
      }
    },
    // 获取当前进度值，直接使用动画进度值（0-100）
    currentProgress() {
      return this.animatedProgress || 0
    },
    // 计算背景圆环的周长
    backgroundCircumference() {
      return 2 * Math.PI * this.circleChart.radius * (this.circleChart.angle / 360)
    },
    backgroundCircumferenceOut() {
      return 2 * Math.PI * 89
    },
    backgroundCircumferenceOutWhite() {
      return 2 * Math.PI * 87 * (this.circleChart.angle / 360)
    },
    // 计算进度圆环的周长
    progressCircumference() {
      return 2 * Math.PI * this.circleChart.radius
    },
    // 计算进度圆环的偏移量
    progressOffset() {
      const circumference = 2 * Math.PI * this.circleChart.radius
      return circumference - (circumference * this.currentProgress / 100)
    },
    // 计算圆环的旋转角度
    circleRotation() {
      return `rotate(${this.circleChart.rotationAngle} 100 100)`
    }
  },
  mounted() {
    this.initCanvasSize()
    this.startAnimation()
  },
  beforeDestroy() {
    if (this.animationTimer) {
      clearInterval(this.animationTimer)
    }
  },
  watch: {
    progress() {
      this.startAnimation()
    }
  },
  methods: {
    // 初始化canvas尺寸
    initCanvasSize() {
      // 使用rpx单位计算，适配不同屏幕
      this.canvasWidth = uni.upx2px(400) // 200px * 2 (rpx转px)
      this.canvasHeight = uni.upx2px(344) // 172px * 2 (rpx转px)
      
      // 根据canvas尺寸计算圆环半径
      this.circleChart.radius = uni.upx2px(170) // 85px * 2 (rpx转px)
    },
    
    // 开始动画
    startAnimation() {
      if (this.animationTimer) {
        clearInterval(this.animationTimer)
      }
      
      const startProgress = this.animatedProgress
      const targetProgress = this.progress
      const duration = 1000 // 动画持续时间1秒
      const steps = 60 // 动画步数
      const stepDuration = duration / steps
      const progressStep = (targetProgress - startProgress) / steps
      
      let currentStep = 0
      
      this.animationTimer = setInterval(() => {
        currentStep++
        this.animatedProgress = startProgress + (progressStep * currentStep)
        
        if (currentStep >= steps) {
          this.animatedProgress = targetProgress
          clearInterval(this.animationTimer)
        }
        
        this.drawCircle()
      }, stepDuration)
    },
    
    // 绘制圆环图表
    drawCircle() {
      const ctx = uni.createCanvasContext('circleChart', this)
      const centerX = this.canvasWidth / 2
      const centerY = this.canvasHeight / 2 + uni.upx2px(40) // 往下调30px，rpx需要乘以2
      
      // 清空画布
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
      
      // 绘制外层分段圆环
      this.drawOuterSegments(ctx, centerX, centerY)
      
      // 绘制白色间隔圆环
      this.drawWhiteRing(ctx, centerX, centerY)
      
      // 绘制背景圆环
      this.drawBackgroundRing(ctx, centerX, centerY)
      
      // 绘制进度圆环
      this.drawProgressRing(ctx, centerX, centerY)
      
      ctx.draw()
    },
    
    // 绘制外层分段圆环
    drawOuterSegments(ctx, centerX, centerY) {
      const radius = this.circleChart.radius + uni.upx2px(8) // 89px = 85px + 4px
      const lineWidth = uni.upx2px(36) // 18px * 2
      
      this.circleChart.outerSegments.forEach((segment, index) => {
        const startAngle = this.circleChart.rotationAngle * Math.PI / 180
        const endAngle = startAngle + (segment.progress * this.circleChart.angle / 100) * Math.PI / 180
        
        ctx.beginPath()
        ctx.arc(centerX, centerY, radius, startAngle, endAngle, false)
        ctx.setStrokeStyle(segment.color)
        ctx.setLineWidth(lineWidth)
        ctx.setLineCap('butt')
        ctx.stroke()
      })
    },
    
    // 绘制白色间隔圆环
    drawWhiteRing(ctx, centerX, centerY) {
      const radius = this.circleChart.radius + uni.upx2px(4) // 87px = 85px + 2px
      const lineWidth = uni.upx2px(36) // 18px * 2
      const startAngle = this.circleChart.rotationAngle * Math.PI / 180
      const endAngle = startAngle + this.circleChart.angle * Math.PI / 180
      
      ctx.beginPath()
      ctx.arc(centerX, centerY, radius, startAngle, endAngle, false)
      ctx.setStrokeStyle('#FFFFFF')
      ctx.setLineWidth(lineWidth)
      ctx.setLineCap('butt')
      ctx.stroke()
    },
    
    // 绘制背景圆环
    drawBackgroundRing(ctx, centerX, centerY) {
      const radius = this.circleChart.radius
      const lineWidth = uni.upx2px(36) // 18px * 2
      const startAngle = this.circleChart.rotationAngle * Math.PI / 180
      const endAngle = startAngle + this.circleChart.angle * Math.PI / 180
      
      ctx.beginPath()
      ctx.arc(centerX, centerY, radius, startAngle, endAngle, false)
      ctx.setStrokeStyle('#F2F4F6')
      ctx.setLineWidth(lineWidth)
      ctx.setLineCap('butt')
      ctx.stroke()
    },
    
    // 绘制进度圆环
    drawProgressRing(ctx, centerX, centerY) {
      const radius = this.circleChart.radius
      const lineWidth = uni.upx2px(36) // 18px * 2
      const startAngle = this.circleChart.rotationAngle * Math.PI / 180
      // 根据进度百分比计算对应的角度：进度值(0-100) * 总角度(220度) / 100
      const progressAngle = (this.currentProgress / 100) * this.circleChart.angle * Math.PI / 180
      const endAngle = startAngle + progressAngle
      
      ctx.beginPath()
      ctx.arc(centerX, centerY, radius, startAngle, endAngle, false)
      ctx.setStrokeStyle(this.progressColor)
      ctx.setLineWidth(lineWidth)
      ctx.setLineCap('butt')
      ctx.stroke()
    },
    
    progressOffsetOut(item) {
      const circumference = 2 * Math.PI * 89
      const ratio = 220 / 360
      const currentProgress = item.progress * ratio || 0
      return circumference - (circumference * currentProgress / 100)
    },
  }
}
</script>

<style lang="scss">
.chart-circle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  .circle-chart {
    display: block;
  }
  .progress-box{
    position: absolute;
    top: 132rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    .progress-number{
      font-size: 96rpx;
      line-height: 112rpx;
      text-align: center;
      color: #155BD4;
    }
    .progress-txt{
      font-size: 28rpx;
      line-height: 44rpx;
      text-align: center;
      color: #999999;
    }
    .progress-tag{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 4rpx 8rpx;
      border-radius: 8rpx;
      background: #E9F7EE;
      color: #2AB55E;
      font-size: 28rpx;
      line-height: 44rpx;
      margin-top: 8rpx;
    }
	.progress-tag-red{
		color: #F02525;
		background: #FFF2F0;
	}
	.progress-tag-yellow{
		color: #F28F15;
		background: #FFF8E6;
	}
	.progress-tag-blue{
		color: #155BD4;
		background: #E6F3FF;
	}
  }
}
</style>
